<template>
	<view class="u-p-b-40">
		<u-navbar title-color="#333" title-bold title-size="36" title="积分明细" :border-bottom="false"
			:background="{backgroundColor: '#FEF1E2'}"></u-navbar>
		<view class="top-div">
			<image class="jifen-img" src="../../static/img/home/jifen-img.png" mode=""></image>
			<view class="jf-div">
				<view class="font_12_333">
					积分余额
				</view>
				<view class="jf-num u-m-t-10">
					{{userInfo.jifen}}
				</view>
				<!-- <view class="u-m-t-18 flex">
					<view class="jf-t">
						积分明细
					</view>
					<view class="jf-t u-m-l-36">
						积分规则
					</view>
				</view> -->
			</view>
		</view>
		<view class="jfhl">
			<u-tabs active-color="#000000" inactive-color="#9695A3" height="88" :list="list" :is-scroll="false" :current="current"
				:show-bar="false"	@change="change"></u-tabs>
			
		</view>
		<view class="">
			<view class="li-item" v-for="(item,index) in jflist" :key="index">
				<view class="flex flex_sb">
					<view class="font_weight">
						{{item.title}}
					</view>
					<view class=" " :class="item.type==1?'num1':'num2'">
						{{item.type==1?'+':'-'}}{{item.jifen}}
					</view>
				</view>
				<view class="flex flex_sb u-m-t-18">
					<view class="font_10_666">
						{{item.created_at}}
					</view>
					<view class="font_12_666">
						余额：{{item.yu}}积分
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jifen:0,
				list: [{
					name: '全部'
				}, {
					name: '增加'
				}, {
					name: '使用',
				}],
				current: 0,
				
				jflist:[],
				 userInfo:[],
				type:0  ,//0全部 1 收入 2 支出
				
				total:0,
				page:1,
				limit:10,
				type2:''
			}
		},
		onReachBottom() {
			if (this.page * this.limit > this.total) {
				// uni.hideNavigationBarLoading();
			} else {
				this.page++;
				this.getlist()
			}
		},
		onLoad(e) {
			this.type2 = e.type
			this.getInfo()
			this.getlist()
		},
		methods: {
			//个人信息
			getInfo() {
				let url = ""
				if(this.type2==1){
					url='/getUserInfo'
				}else{
					url='/lawyer/getLawyer'
				}
				this.$api({
					url: url,
					method: 'get',
					data: {
						token:uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						this.userInfo = res.data
					} 
				})
			},
			change(index) {
				this.page = 1
				this.current = index;
				
				this.type = this.current
				this.getlist()
			},
			getlist(){
				let url = ""
				if(this.type2==1){
					this.$api({
						url: '/getUserJiFenList',
						method: 'get',
						data: {
							token:uni.getStorageSync("token"),
							type:this.type,
							page:this.page,
							limit:this.limit,
						},
					}).then(res => { 
						if (res.code == 1) {
							// this.jflist = res.data
							this.total=res.data.count
							let data = res.data.list
							if (this.page == 1) {
								this.jflist = data
							} else {
								this.jflist = [...this.jflist, ...data]
							}
						}
					})
				}else{
					this.$api({
						url: '/lawyer/score_list',
						method: 'get',
						data: {
							token:uni.getStorageSync("token"),
							type:this.type,
							page:this.page,
							limit:this.limit,
						},
					}).then(res => { 
						if (res.code == 1) {
							// this.jflist = res.data
							this.total=res.data.list.total
							let data = res.data.list.data
							if (this.page == 1) {
								this.jflist = data
							} else {
								this.jflist = [...this.jflist, ...data]
							}
						}
					})
					
				}
				
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.li-item{
		width: 686rpx;
		padding: 28rpx 24rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 18rpx auto;
		
		
		.num1{
			font-weight: bold;
			font-size: 36rpx;
			color: #FC3A30;
		}
		.num2{
			font-weight: bold;
			font-size: 36rpx;
			color: #307EFC;
		}
	}
	.top-div {
		width: 750rpx;
		height: 330rpx;

		background: linear-gradient(180deg, #FEF1E2 0%, #FFF1E1 59%, rgba(254, 241, 226, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: relative;

		.jifen-img {
			width: 272rpx;
			height: 222rpx;
			position: absolute;
			right: 52rpx;
			top: 0;
		}

		.jf-div {
			padding: 18rpx 52rpx;
			padding-top: 52rpx;
		}

		.jf-num {
			font-weight: bold;
			font-size: 56rpx;
			color: #333333;
		}

		.jf-t {
			color: #FF5300;
			text-decoration-line: underline;
		}
	}

	.jfhl {
		width: 686rpx;
		margin: 0 auto;
		margin-top: -120rpx;
		background: #FFFFFF;
		border-radius: 44rpx;
		padding: 0 34rpx;
		position: relative;
		z-index: 2;
		
	}
</style>